<template>
  <div class="filters-btm" >
     <el-row type="flex" >
       <el-col :span="8">
         <div class="filters-btm-item">
           <el-row type="flex">
            <el-col>酒店</el-col>
            <el-col class="ta-r">0-{{price_Filter}}</el-col>
           </el-row>
           <el-row>
             <el-slider v-model="sliderCurrent" @change="price_lthandle"  :min="0" :max="4000"></el-slider> 
           </el-row>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="filters-btm-item">
           <el-row type="flex">
            住宿等级
           </el-row>
           <el-row>
              <el-dropdown>
                  <span class="el-dropdown-link">
                     <span class="dropdown-link-text" v-if="!model.hotellevel_in.length">不限</span>
                     <span class="dropdown-link-text" v-else-if="JSON.parse(leveicos).length == 1">{{hotelOptions.levels[model.hotellevel_in - 1].name}}</span>
                     <span class="dropdown-link-text" v-else>已选{{JSON.parse(leveicos).length}}项</span>
                     <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width:160px;">
                      <el-dropdown-item 
                      @click.native="handleCompanyChange(item.level)"
                      v-for="(item,index) in hotelOptions.levels" 
                      :key="index">
                      <i class="iconfont iconcircle " v-if="leveicos.indexOf(JSON.stringify(item.level)) == -1"></i> 
                      <i class="iconfont iconright-1" v-else></i> 
                      {{item.name}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </el-row>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="filters-btm-item">
           <el-row type="flex">
            住宿类型
           </el-row>
           <el-row>
              <el-dropdown>
                <span class="el-dropdown-link">
                      <span class="dropdown-link-text" v-if="!model.hoteltype_in.length">不限</span>
                     <span class="dropdown-link-text" v-else-if="JSON.parse(typeicos).length == 1">{{hotelOptions.types[model.hoteltype_in - 1].name}}</span>
                     <span class="dropdown-link-text" v-else>已选{{JSON.parse(typeicos).length}}项</span>
                   <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="width:160px;" >
                      <el-dropdown-item  
                      @click.native="houseTypeHandle(item.id)"
                      v-for="(item,index) in hotelOptions.types" 
                      :key="index">
                      <i class="iconfont iconcircle" v-if="typeicos.indexOf(JSON.stringify(item.id)) == -1"></i> 
                      <i class="iconfont iconright-1 " v-else></i> 
                      {{item.name}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
           </el-row>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="filters-btm-item">
           <el-row type="flex">
            住宿设施
           </el-row>
           <el-row>
              <el-dropdown>
                  <span class="el-dropdown-link">
                     <span class="dropdown-link-text" v-if="!model.hotelasset_in.length">不限</span>
                     <span class="dropdown-link-text" v-else-if="JSON.parse(equipicos).length == 1">{{hotelOptions.assets[model.hotelasset_in - 1].name}}</span>
                     <span class="dropdown-link-text" v-else>已选{{JSON.parse(equipicos).length}}项</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width:160px;">
                    <el-dropdown-item
                    v-for="(item,index) in hotelOptions.assets"
                    :key="index"
                    @click.native="equipinfoHandle(item.id)"
                    >
                    <i class="iconfont iconcircle" v-if="equipicos.indexOf(JSON.stringify(item.id)) == -1"></i> 
                    <i class="iconfont iconright-1 " v-else></i> 
                    {{item.name}}</el-dropdown-item>
                    
                  </el-dropdown-menu>
              </el-dropdown>
           </el-row>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="filters-btm-item">
           <el-row type="flex">
            酒店品牌
           </el-row>
           <el-row>
              <el-dropdown>
                  <span class="el-dropdown-link">
                     <span class="dropdown-link-text" v-if="!model.hotelbrand_in.length">不限</span>
                     <span class="dropdown-link-text" v-else-if="JSON.parse(brandicos).length == 1">{{hotelOptions.brands[model.hotelbrand_in - 4].name}}</span>
                     <span class="dropdown-link-text" v-else>已选{{JSON.parse(brandicos).length}}项</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width:160px;height: 200px;overflow: auto;padding:10px 0 20px 0;" >
                    <el-dropdown-item
                    v-for="(item,index) in hotelOptions.brands"
                    :key="index"
                    @click.native="brandsinfoHandle(item.id)"
                    >
                    <i class="iconfont iconcircle" v-if="brandicos.indexOf(JSON.stringify(item.id)) == -1"></i> 
                    <i class="iconfont iconright-1 " v-else></i> 
                    {{item.name}}</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
           </el-row>
         </div>
       </el-col>
     </el-row>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
    data() {
      return {
        List:{},
        sliderCurrent:4000,
        model:{
          price_lt:4000,
          hotellevel_in:[],
          hoteltype_in:[],
          hotelasset_in:[],
          hotelbrand_in:[],
        },
        
      }
    },
    computed:{
      //价格
      price_Filter() {
        return this.model.price_lt
      },
      leveicos() {
        return JSON.stringify(this.model.hotellevel_in || '')
      },
      typeicos() {
        return JSON.stringify(this.model.hoteltype_in || '')
      },
      equipicos() {
        return JSON.stringify(this.model.hotelasset_in || '')
      },
      brandicos() {
        return JSON.stringify(this.model.hotelbrand_in || '')
      }
    },
    props:['hotelOptions','start'],
    methods:{
      //价格
      price_lthandle(pri) {
        this.model.price_lt = pri
      },
      //封装query
      queryString(str,id) {
          if(!str.length) {
            str.push(id)
          }else{
            str.indexOf(id) == -1 
          ? str.push(id)
          : str.splice(str.indexOf(id),1)
          }
        return str
      },
      //房间等级
      handleCompanyChange(id) {
        this.model.hotellevel_in = this.queryString(this.model.hotellevel_in,id)   
      },
      //房间类型
      houseTypeHandle(id) {
        this.model.hoteltype_in = this.queryString(this.model.hoteltype_in,id)
      },
      //房间设施
      equipinfoHandle(id) {
        this.model.hotelasset_in = this.queryString(this.model.hotelasset_in,id)
      },
      //酒店品牌
      brandsinfoHandle(id) {
         this.model.hotelbrand_in = this.queryString(this.model.hotelbrand_in,id)
      },
      //vuex请求数据
      ...mapActions({
        add: 'hotel_filter/FILTER_DATA_BTM' 
      })
    },
    watch:{
      model:{
        handler() {
          //vuex请求数据
          this.add(this.model).then(res => {
           
            this.$emit('FilterList',res.data)
          })
        },
        deep:true,
        immediate:true
      },
      start() {
        setTimeout(() => {
          window.scrollTo(0,500)
        },500)
        if(this.start != null) {
          this.$set(this.model,'_start',this.start)
        }
      }
    },
    mounted() {
      if(JSON.parse(localStorage.getItem('store')).hotel_filter.indexBtm.price_lt) {
        this.sliderCurrent = JSON.parse(localStorage.getItem('store')).hotel_filter.indexBtm.price_lt
      }
    }
    
}
</script>

<style scoped lang="less">
.filters-btm{
  margin:30px 0;
  padding-top: 7px;
  border: 1px solid rgb(221, 221, 221);
}
.filters-btm-item{
  padding: 6px 20px;
  border-right: 1px solid rgb(221, 221, 221);
  font-size: 14px;
  color: #666;
  .ta-r{
    text-align: right;
  }
  .el-dropdown{
    width: 100%;
    padding: 10px 0;
    .el-dropdown-link{
      display: flex;
      align-items: center;
      .dropdown-link-text {
        flex: 1;
      }
    }
  }
}

.border-none {
  border-right: 0;
}

</style>